﻿<template>
    <div class="wish_container" >
        <header class="wish_header" ref="wish_header" style="background-color:#fff;color:#eeeeee;">
          <img src="../../static/img/new_style_go_back.png" class="back_c"/>
          <span class="wish_header_n">
            愿望
          </span>
          <input type="text" class="input_search" placeholder="ID/学校/关键词"/>
          <span class="add_wish" v-on:click="add_wish_w">添加愿望</span>
        </header>


       <!-- mid s -->
      <div class="wish_mid" ref="wish_mid">
        <img src="../../static/img/wish_seed.png" class="wish_seed"/>
        <div class="wish_mid_right">
          <p class="wish_header_w">
            相识不是为了风花雪月，而是为了一点点地改变世界
          </p>
          <p class="wish_header_title">
            --这是我们的仁义
          </p>
        </div>
      </div>
      <!-- mid e-->

      <!-- wish mid nav s-->
      <div class="wish_mid_wish" ref="wish_mid_wish">
        <div class="wish_mid_nor_btn wish_mid_act_btn" v-on:click="wish_mid_nor_btn($event,1)">
          进行中
        </div>
        <div class="wish_mid_nor_btn" v-on:click="wish_mid_nor_btn($event,2)">
          提案中
        </div>
        <div class="wish_mid_nor_btn" v-on:click="wish_mid_nor_btn($event,3)">
          新愿望
        </div>
        <div class="wish_mid_nor_btn" v-on:click="wish_mid_nor_btn($event,4)">
          后期跟进
        </div>
      </div>
      <!-- wish mid nav e -->

      <!-- wish main s -->
      <div class="wish_main" ref="wish_main">
        <!-- 进行中s -->
        <div class="wish_main_now" v-for="data in list_data" v-on:click="go_wish_detail(data.id,data.count,data.user.image,data.user.id)">
          <div class="wish_main_now_header">
            {{data.title}}
          </div>
          <div class="wish_main_now_middle">
            <ul class="wish_main_now_title">
              <li class="first_now_title">
                发起人：{{data.user.userName}}
              </li>
              <li>
                参与人数：{{data.count}}
              </li>
            </ul>
            <ul class="wish_main_now_title">
              <li class="first_now_title">
                所需技能：{{data.skill}}
              </li>
              <li>
                进度：未完成
              </li>
            </ul>

            <div class="wish_main_now_img_wrapper">
              <img v-bind:src="data.image|new_img_show_Act" class="wish_main_now_img">
              <div class="wish_main_now_mask">
                愿望简介：{{data.intro}}
              </div>
            </div>

           <!-- last_btn on now_img s -->
            <div class="bottom_last_now_wrapper">
              <div class="bottom_last_now_btn" v-on:click="wish_collect(data.id)">
                <img src="../../static/img/wish_collectt.png" alt="Alternate Text" class="wish_collect" />
                <span class="collect_on_now">
                  收藏
                </span>
              </div>
              <div class="bottom_last_now_btn" v-on:click="share">
                <img src="../../static/img/wish_share.png" alt="Alternate Text" class="wish_share"/>
                <span class="collect_on_now">
                  分享
                </span>
              </div>
            </div>
            <!-- last_btn on now_img e -->

          </div>
        </div>

        <!-- 进行中e -->
      </div>
      <!--share_t_s-->
      <share_t ref="share_f"></share_t>

      <!--share_t_e-->
      <!-- wish main e -->
    </div>

</template>

<script>
  import '../../static/css/FooterMenu.css';
  import {mapState, mapMutations, mapActions} from 'vuex';
  import store from '../vuex/store_index';
  import common from "../common/common.js";
  import use_rem from "../../static/js/use_rem.js";
  import { Toast, Indicator } from 'mint-ui';
  import VueScroller from 'vue-scroller';
  import Vue from "vue";
  import qs from 'qs';
  import '../../static/css/mint-ui/style.css';
  import "../filter/filter.js"
  import share_t from "../common/wx_share_temp/wx_share_temp.vue";
  import header_nav from "../common/header_other/Header_other.vue";

  Vue.use(VueScroller);
 // axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  Vue.prototype.$http = axios;

  import axios from 'axios'
  use_rem();
  export default {
    name: 'FooterMenu',
    data () {
      return {
        menu_list: this.$store.getters.get_footer_menu_list,
        sign_c: true,
        list_data: "",
        base_url:"",
        header_n:"添加愿望"
      }
    },
    computed: mapState([
      'footer_menu_list'
    ]),
    methods: {
      ...mapActions(['redirect']),
      add_wish_w:function () {

        this.$store.dispatch("thom_redirect",
          {
            name: "/input_wish", router: this.$router
          });
      },
      go_wish_detail:function (id,num,image,this_user_id) {
        let user_id = location.search.split("=")[1];
          sessionStorage.setItem("wish_detail_id",id);
          sessionStorage.setItem("p_num",num);
          sessionStorage.setItem("user_image",image);
          sessionStorage.setItem("user_id",user_id);
          sessionStorage.setItem("detail_user_wish_id",this_user_id);
        this.$store.dispatch("thom_redirect",
          {
            name: "/wx_wish_detail", router: this.$router
          });
      },
      share:function(){
       // console.log(this.$refs.share_f.share_show);
        this.$refs.share_f.share_show();
      },
      wish_mid_nor_btn: function (el,num) {
        let wish_mid_nor_btn = document.getElementsByClassName("wish_mid_nor_btn");
        let wish_mid_act_btn = document.getElementsByClassName("wish_mid_act_btn")[0];

        wish_mid_act_btn.className = wish_mid_act_btn.className.replace(" wish_mid_act_btn", "");
        el.target.className +=" wish_mid_act_btn";
        this.get_data(num);
      },
      get_data: function (se) {
        let user_id = location.search.split("user_id=")[1];
        sessionStorage.setItem("user_id",user_id)

        Indicator.open();
        this.$http.post(this.base_url+'/yizhiweimen/api/user/wish/getWishInfo',
          qs.stringify(
            {
              'schedule': se,
              "userId": user_id,
              "currentPage": 1,
              "pageSize": 10
            })
          )
          .catch((thrown) => {
            Indicator.close();
          }).then((e) => {
            Indicator.close();
            this.list_data = e.data;
          })
      },
      jump: function (name) {
        let id = name.replace("./", "");
        //common.jump({
        //  url: name,
        //  id: id
        //});

        //关闭所有 webview
        let all = plus.webview.all();

        //current webview
        var curr = plus.webview.currentWebview();
        for (let i = 0, len = all.length; i < len; i++) {
          //关闭除setting页面外的其他页面
          if (all[i].getURL() == curr.getURL())
            continue;
            plus.webview.close(all[i]);
        }

        //mui.openWindow({
        //  url:name,
        //  id: id,
        //  createNew: false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
        //  show: {
        //    autoShow: true,//页面loaded事件发生后自动显示，默认为true
        //    aniShow: "zoom-fade-in",//页面显示动画，默认为”slide-in-right“；
        //  },
        //  waiting: {
        //    autoShow: true,//自动显示等待框，默认为true
        //    title: '正在加载...',//等待对话框上显示的提示内容
        //  }
        //})
      },
      wish_collect: function (id) {
        let user_id = location.search.split("=")[1];
        common.collect_c({
          sort: "1",
          user_id: user_id,
          collect_id:id
        }, Indicator,qs,this)
      }
    },
    mounted: function () {
//    this.$store.getters.Get_Bot_C_obj
      let wish_header = window.getComputedStyle(this.$refs.wish_header, "height").height.replace("px", "");
      let wish_mid = window.getComputedStyle(this.$refs.wish_mid, "height").height.replace("px", "");
      let wish_mid_wish = window.getComputedStyle(this.$refs.wish_mid_wish, "height").height.replace("px", "");

      let main_h = document.body.clientHeight;

      this.$refs.wish_main.style.height = main_h - parseInt(wish_header) - parseInt(wish_mid) - parseInt(wish_mid_wish) + "px";
      let user_id = location.search.split("=")[1];
      sessionStorage.setItem("user_id",user_id);//添加愿望时候用的
      common.is_app(this);

      //get_data
      Indicator.open();
      this.$http.post(this.base_url+'/yizhiweimen/api/user/wish/getWishInfo',
        qs.stringify(
          {
            'schedule': 1,
            "userId": user_id,
            "currentPage": 1,
            "pageSize": 10
          })
        )
        .catch((thrown) => {
          Indicator.close();
        }).then((e) => {
          Indicator.close();
          this.list_data = e.data;

        })

      //微信分享配置
      //获取当前 url
      let url = location.href;
      url = url.split("#")[0];
      Indicator.open();
      //获取分享配置
      this.$http.post('/yizhiweimen/api/wxUtil/getSign',
        qs.stringify(
          {
            "url": url
          })
        )
        .then((e) => {
          // 上面两个请求都完成后，才执行这个回调方法
          Indicator.close();
          let data = e.data;

          let link = "http://wx.yizhiweimeng.com/yizhiweimen/static/wish.html";
          let post_name = this.list_d.postName;
          let img = this.list_d.images;
          let url_list = "http://wx.yizhiweimeng.com/yizhiweimen/api/user/wxLogin/getwxLogin/4";
          let prod_id = sessionStorage.getItem("off_post_id");
          let post = this.$http.post;

          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名，见附录1
            jsApiList: ["onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });

          wx.onMenuShareTimeline({
            title: post_name, // 分享标题
            link: url_list + "?prod_id=" + prod_id + "&url=" + link, // 分享链接，该链接域名必须与当前企业的可信域名一致
            imgUrl: "https://wx.yizhiweimeng.com/yizhiweimen/static/" + img, // 分享图标
            success: function () {
            },
            cancel: function () {
            }
          });

        })
        .catch((e) => {
          console.log(e)

        })
    },
    components: {
      share_t,
      header_nav
    }
  }
</script>
<!--inner style for thom template-->
<style scoped>
  .wish_mid_wish{
    background-color:#fff;
  }
  /*wish_main_now s*/
  .wish_share{
    width:4vw;
    height:3.2vw;
  }
  .wish_collect {
    width: 3.2vw;
    height: 3.3vw;
  }
  .bottom_last_now_btn {
    color: #8c502b;
    font-size:4vw;
    border-radius: 0 0 2vw 2vw;
  }
  .bottom_last_now_wrapper {
    display: flex;
    justify-content: space-between;
    margin-top:3vw;
    height:8vw;
    line-height:8vw;
    background-color:#fff;
    border-radius:2vw
  }
  .bottom_last_now_btn{
    height:100%;
    width:50%;
    border-radius:0 0 2vw 2vw
  }
  .wish_main_now_mask {
    text-align: left;
    font-size: 3vw;
    line-height: 1.5;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .wish_main_now_img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2vw;
    box-shadow: 1px 1px 4px 2px #6665658a;
    margin: 1.6vw auto 0;
  }
  .wish_main_now_img_wrapper {
    position:relative;
    width: 84.8vw;
    height: 37vw;
    margin:0 auto;
  }
  .wish_main_now_mask {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 9.6vw;
    border-radius: 0 0 2vw 2vw;
    background-color: #75757591;
    width: 100%;
  }
  .wish_main_now_title li {
    width: 50%;
  }
  .first_now_title {
    margin-left: 3vw;
  }
  .wish_main_now_title {
    display: flex;
    font-size: 3.2vw;
    padding-top:1.3vw;
    text-align:left;
  }
  .wish_main_now_middle {
    height: 50.6vw;
    background-color: #dea675;
    font-size: 3vw;
    color: #fff;
  }
  .wish_main_now_header {
    height: 7.4vw;
    line-height: 7.4vw;
    width: 100%;
    border-radius: 2vw 2vw 0 0;
    background-color: #9f5c2f;
    text-align: center;
    color: #fff;
    font-size: 4vw;
  }
  .wish_main_now {
    height: 66.2vw;
    width: 89vw;
    border-radius: 2vw;
    box-shadow: 2px 2px 4px 2px #b5b5b5;
    margin: 3.4vw auto 0;
  }
  /*wish_main_now e*/
  /*wish_mid*/
  .wish_main {
    overflow-y: scroll;
    background-color: #eeeeee;
  }
  .wish_mid_wish .wish_mid_act_btn {
    color: #9f5c2f
  }
  .wish_mid_wish {
    height: 8.8vw;
    line-height: 8.8vw;
    color: #b5b5b5;
    font-size:3vw;
    text-align:center;
    display:flex;
    justify-content:space-around;
  }
  .wish_header_title {
    text-align: right;
  }
  .wish_header_w {
    text-indent: 6vw;
  }
  .wish_mid_right {
    line-height:1.2;
    font-size: 3.5vw;
    text-align:left;
    color: #9f5c2f;
    width: 66vw;
    height: 13.2vw;
    background-color: #fff;
    border-radius: 2vw;
    margin-top:2.1vw;
    padding:3vw;
  }
  .wish_seed {
    width: 16.6vw;
    display: block;
    padding-left: 4.8vw;
    padding-top: 3.4vw;
    height:15.3vw;
    margin-right:3.2vw;
  }
  .wish_mid {
    display:flex;
    height: 23.2vw;
    background-color: #fff;
  }
  /*wish_mid*/
  .add_wish {
    width: 18vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #fff;
    font-size: 3.5vw;
    border-radius: 2vw;
    background-color: #d84848;
    margin-left: 2.5vw;
    display: inline-block;
    text-align: center;
  }
  .input_search {
    width: 42vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #9f5c2f;
    border-radius: 2vw;
    margin-left: 18vw;
    border: 0;
    background-color: #eee;
  }
  .wish_header {
    height: 11.7vw;
    line-height: 11.7vw;
    color: #fff;
    font-size: 4vw;
    background-color: #9f5c2f;
    position: relative;
    text-align: left;
  }
  .wish_header_n {
    font-size: 4vw;
    color: #fff;
    padding-left: 1.7vw;
    margin-left: 5.8vw;
  }
  .back_c{
    height:6vw;
    width:5vw;
    position:absolute;
    top:50%;
    left:1.3vw;
    transform:translateY(-50%);
  }
</style>

